<script setup lang="ts">
import { fail } from 'assert'
import { useRoute, useRouter } from 'vue-router'
import { onMounted, reactive } from 'vue'

const activeTabs = reactive({
  Home: false,
  Mine: false,
  Products: false,
})
const router = useRouter()
const route = useRoute()
const pushHome = () => {
  router.push('/')
  activeTabs.Home = true
  activeTabs.Products = false
  activeTabs.Mine = false
}
const pushMine = () => {
  router.push('/mine')
  activeTabs.Home = false
  activeTabs.Products = false
  activeTabs.Mine = true
}
const pushProducts = () => {
  router.push('/products/all')
  activeTabs.Home = false
  activeTabs.Products = true
  activeTabs.Mine = false
}
onMounted(() => {
  const r = route.path
  if (r.includes('products'))
    activeTabs.Products = true

  else if (r.includes('mine'))
    activeTabs.Mine = true

  else
    activeTabs.Home = true
})
</script>

<template>
  <div class="foot">
    <div @click="pushHome">
      <svg
        v-if="!activeTabs.Home" t="1649674874842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="5933" width="25" height="25"
      >
        <path
          d="M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8l377.6-310.4c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zM816 928H608c-19.2 0-32-12.8-32-32v-150.4c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2C163.2 928 128 892.8 128 848V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384v-118.4c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304C896 896 864 928 816 928z"
          fill="#666666" p-id="5934"
        />
      </svg>
      <svg
        v-else t="1649674930933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="6227" width="25" height="25"
      >
        <path
          d="M947.2 422.4L572.8 115.2c-32-25.6-86.4-25.6-118.4 0L76.8 425.6c-12.8 6.4-16 22.4-9.6 35.2 3.2 12.8 16 19.2 28.8 19.2h32v364.8C128 892.8 163.2 928 211.2 928H416c19.2 0 32-12.8 32-32v-147.2c0-22.4 35.2-44.8 64-44.8 28.8 0 67.2 22.4 67.2 44.8V896c0 19.2 12.8 32 32 32h208c48 0 80-32 80-83.2V480h32c12.8 0 25.6-9.6 28.8-22.4 3.2-12.8 0-25.6-12.8-35.2z"
          fill="#666666" p-id="6228"
        />
      </svg>
      <p>首页</p>
    </div>
    <div @click="pushProducts">
      <svg v-if="!activeTabs.Products" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="6377" width="25" height="25">
        <path
          d="M791.466667 106.666667H232.533333C187.733333 106.666667 149.333333 145.066667 149.333333 192v640c0 46.933333 38.4 85.333333 83.2 85.333333h558.933334c46.933333 0 83.2-38.4 83.2-85.333333V192c0-46.933333-36.266667-85.333333-83.2-85.333333zM832 832c0 23.466667-19.2 42.666667-40.533333 42.666667H232.533333c-21.333333 0-40.533333-19.2-40.533333-42.666667V192c0-23.466667 19.2-42.666667 40.533333-42.666667h558.933334c23.466667 0 40.533333 19.2 40.533333 42.666667v640z"
          p-id="6378"
        />
        <path
          d="M298.666667 533.333333h334.933333c12.8 0 21.333333-8.533333 21.333333-21.333333s-8.533333-21.333333-21.333333-21.333333H298.666667c-12.8 0-21.333333 8.533333-21.333334 21.333333s10.666667 21.333333 21.333334 21.333333zM725.333333 684.8H298.666667c-12.8 0-21.333333 8.533333-21.333334 21.333333s8.533333 21.333333 21.333334 21.333334h426.666666c12.8 0 21.333333-8.533333 21.333334-21.333334s-8.533333-21.333333-21.333334-21.333333z"
          p-id="6379"
        />
        <path d="M311.466667 309.333333m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="6380" />
        <path d="M522.666667 309.333333m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="6381" />
        <path d="M714.666667 309.333333m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="6382" />
      </svg>
      <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="6579" width="25" height="25">
        <path
          d="M791.466667 106.666667H232.533333C187.733333 106.666667 149.333333 145.066667 149.333333 192v640c0 46.933333 38.4 85.333333 83.2 85.333333h558.933334c46.933333 0 83.2-38.4 83.2-85.333333V192c0-46.933333-36.266667-85.333333-83.2-85.333333z m-76.8 170.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32-32-14.933333-32-32 14.933333-32 32-32z m-192 0c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32-32-12.8-32-32c0-17.066667 14.933333-32 32-32z m-211.2 0c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32-32-14.933333-32-32 12.8-32 32-32zM298.666667 490.666667h334.933333c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333H298.666667c-12.8 0-21.333333-8.533333-21.333334-21.333333s10.666667-21.333333 21.333334-21.333333z m426.666666 236.8H298.666667c-12.8 0-21.333333-8.533333-21.333334-21.333334s8.533333-21.333333 21.333334-21.333333h426.666666c12.8 0 21.333333 8.533333 21.333334 21.333333s-8.533333 21.333333-21.333334 21.333334z"
          p-id="6580"
        />
      </svg>
      <p>测评</p>
    </div>
    <div @click="pushMine">
      <svg v-if="!activeTabs.Mine" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
        <path
          d="M800 352C800 194.133333 672 64 512 64S224 194.133333 224 352c0 117.333333 70.4 219.733333 172.8 264.533333-130.133333 42.666667-236.8 153.6-270.933333 296.533334-2.133333 10.666667 4.266667 23.466667 14.933333 25.6h4.266667c10.666667 0 19.2-6.4 21.333333-17.066667C204.8 759.466667 349.866667 640 509.866667 640h2.133333c160 0 288-130.133333 288-288z m-533.333333 0C266.666667 217.6 377.6 106.666667 512 106.666667s245.333333 110.933333 245.333333 245.333333S646.4 597.333333 512 597.333333s-245.333333-110.933333-245.333333-245.333333zM893.866667 913.066667c-23.466667-96-78.933333-179.2-157.866667-234.666667l-21.333333-14.933333c-10.666667-6.4-23.466667-4.266667-29.866667 6.4-6.4 10.666667-4.266667 23.466667 6.4 29.866666l21.333333 14.933334c70.4 49.066667 121.6 123.733333 140.8 211.2 2.133333 10.666667 10.666667 17.066667 21.333334 17.066666h4.266666c10.666667-6.4 17.066667-17.066667 14.933334-29.866666z"
          fill="#666666" p-id="6778"
        />
      </svg>
      <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
        <path
          d="M616.533333 618.666667c106.666667-42.666667 181.333333-147.2 181.333334-266.666667C797.866667 192 669.866667 64 509.866667 64c-157.866667 0-288 128-288 288 0 121.6 74.666667 224 181.333333 266.666667-134.4 38.4-241.066667 151.466667-268.8 294.4-2.133333 6.4 0 12.8 4.266667 17.066666 2.133333 4.266667 8.533333 8.533333 14.933333 8.533334h712.533333c6.4 0 12.8-2.133333 17.066667-8.533334 4.266667-4.266667 6.4-10.666667 4.266667-17.066666-29.866667-142.933333-136.533333-256-270.933334-294.4z"
          fill="#666666" p-id="6976"
        />
      </svg>
      <p>我的</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.foot {
  position: fixed;
  height: 75px;
  width: 100%;
  z-index: 255;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;

  & > div {
    text-align: center;

    & > p {
      height: 0;
      font-size: 13px;
      line-height: 5px;
    }

    & > img {
      position: relative;
      top: 6px;
    }
  }
}
</style>
